<template>
	<view class="container">
		<!-- 消息列表 -->
		<view class="message-list">
			<view v-for="(item,index) in pushMsgList" :key="index">

				<!-- 公告 13雇员公告 12雇主公告 14全部公告-->
				<view class="gonggao" v-if="item.type == 12 || item.type == 13 || item.type == 14 ">
					<view>
						<text>{{item.content.title}}</text>
						<text>{{ item.createTime.slice(0,11)}}</text>
					</view>
					<text>{{ item.content.titleText}}</text>
				</view>


				<view class="guyuan" v-if="userType=='1'">
					<!-- 雇主的消息 -->
					<view class="gonggao" v-if=" item.type==1 ">
						<view>
							<text>{{item.content.title}}</text>
							<text>{{ item.createTime.slice(0,11)}}</text>
						</view>
						<view style="margin-top: 15rpx;">
							<text style="margin-right: 30rpx; color: rgba(64,33,16,0.50);">零工名称</text>
							<text>{{ item.taskName }}</text>
						</view>
					</view>


					<view class="boss-message" v-if="item.type == 8 || item.type == 10"
						@click="handleOpenMyJob(item.type)">
						<view>
							<text>{{item.content.title}}</text>
							<text>{{ item.createTime.slice(0,11)}}</text>
						</view>

						<text>{{item.content.titleText}}</text>

						<view style="margin-top: 15rpx;">
							<text>零工名称</text>
							<text>{{ item.taskName }}</text>
						</view>

						<view v-if="item.type == 10 ">
							<text>驳回原因</text>
							<text>{{ item.remark }}</text>
						</view>
					</view>
					<!-- 0有雇员报名 2有雇员开工4有雇员收工6有雇员同意邀请8审核通过10审核驳回-->
					<!-- 雇主的消息 -->
					<view class="boss-message"
						v-if="item.type == 0 || item.type == 2 || item.type == 4 || item.type == 6"
						@click="handleOpenOrderD(item.taskId, item.type)">
						<view>
							<text>{{item.content.title.slice(6, 8)=='收工'?item.content.title.slice(0, 6):item.content.title.slice(0, 5)}}
								<text
									:style="{color: item.content.title.slice(5, 7)=='开工' ? '#4A90E2' : item.content.title.slice(6, 8)=='收工' ? '#4A90E2' : item.content.title.slice(5, 7)=='申请' ? '#F39B19' : '#4E9800'}">{{item.content.title.slice(6, 8)=='收工'?item.content.title.slice(6, 8):item.content.title.slice(5, 7)}}</text>{{item.content.title.slice(6, 8)=='收工'?item.content.title.slice(8):item.content.title.slice(7)}}</text>
							<text>{{ item.createTime.slice(0,11)}}</text>
						</view>
						<view>
							<text>零工名称</text>
							<text>{{ item.taskName }}</text>
						</view>

						<view>
							<text>干活地址</text>
							<text>{{ item.address }}</text>
						</view>
					</view>

				</view>


				<view class="guyuan" v-if="userType=='0'">
					<view class="gonggao" v-if=" item.type==15">
						<view>
							<text>{{item.content.title}}</text>
							<text>{{ item.createTime.slice(0,11)}}</text>
						</view>
						<view style="margin-top: 15rpx;">
							<text style="margin-right: 30rpx; color: rgba(64,33,16,0.50);">零工名称</text>
							<text>{{ item.taskName }}</text>
						</view>
					</view>
					<!-- 1同意你的报名 3同意你的开工 5有邀请你  7结算你的订单9附近零工推送（无）11拒绝你的报名 -->
					<!-- 雇员的消息 -->
					<view class="staff-message"
						v-if="item.type == 1 || item.type == 3 || item.type == 5 || item.type == 7 || item.type == 11"
						@click="handleOpenDetail(item.orderId, item.taskId)">
						<view>
							<text>{{item.content.title.slice(0, 2)}} <text
									:style="{color: item.content.title.slice(2, 4)=='邀请' ? '#4A90E2' : item.content.title.slice(2, 4)=='同意' ? '#4E9800' : item.content.title.slice(2, 4)=='结算' ? '#F39B19' : item.content.title.slice(2, 4)=='取消' ? 'rgba(64,33,16,1)' : ''}">{{item.content.title.slice(2, 4)}}</text>{{item.content.title.slice(4)}}</text>
							<text>{{ item.createTime.slice(0,11)}}</text>
						</view>
						<view>
							<text>零工名称</text>
							<text>{{ item.taskName }}</text>
						</view>
						<view>
							<text>干活地址</text>
							<text>{{ item.address }}</text>
						</view>
					</view>

				</view>

			</view>
		</view>
		<!-- 加载 -->
		<uni-load-more :status="hasFlag ? 'loading' : 'noMore'"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pushMsgList: [], //推送消息列表
				employerAnswer: 1, //雇主的回应0同意，1邀请，2取消，3结算
				orderId: '', //前往订单id
				taskStatus: '', //任务状态
				requestObj: { //
					pageNum: 0,
					pageSize: 12,
				},
				hasFlag: true, // 是否还有更多数据要加载
				userType: "",
				hide: false,
			}
		},
		computed: {
			'isNewPlatMsg': function() {
				return this.$store.state.isNewPlatMsg
			}
		},
		methods: {

			// 雇主的消息
			handleOpenMyJob() {
				// console.log('雇主-零工审核')
				// 零工审核
				//uni.navigateTo({ url: '/pages/my-job/boss-my-job' })
				uni.reLaunch({
					url: '/pages/my-job/boss-my-job-new'
				})
				setTimeout(() => {
					let pages = getCurrentPages()
					pages[pages.length - 1].$vm.handleTabChange({
						detail: {
							current: 1
						}
					})
				}, 200)
			},

			// 雇主的消息
			handleOpenOrderD(taskId) {
				// console.log('雇主有雇员报名或者有雇员收工了', taskId)
				// 有雇员报名
				this.task_detail(taskId)
			},

			// 雇员的消息
			handleOpenDetail(orderId, taskId) {
				// console.log(orderId, taskId,"-------------------");
				if (orderId == null) {
					// 结算订单，同意开工
					console.log('雇员orderId == null')
					this.order_id_by_task_id(taskId) //查订单id
					uni.navigateTo({
						url: '/pages/app/order-detail?id=' + this.taskId
					})
				} else {
					// 同意，邀请
					console.log('雇员有orderId')
					this.orderId = orderId
					uni.navigateTo({
						url: '/pages/order-detail/order-detail?id=' + this.orderId
					})
				}
			},

			// 根据任务id查任务状态
			async task_detail(taskId) {
				let res = await this.$fetch(this.$api.task_detail, {
					taskId: taskId
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.taskStatus = res.data.status
				console.log('雇主-任务状态', this.taskStatus)
				uni.navigateTo({
					url: '/pages/app-employer/boss-order-detail/boss-order-detail?id=' + taskId +
						'&taskStatus=' + this.taskStatus
				})
			},

			// 根据任务id查订单id
			async order_id_by_task_id(taskId) {
				let res = await this.$fetch(this.$api.order_id_by_task_id, {
					taskId: taskId
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.orderId = res.data
				uni.navigateTo({
					url: '/pages/order-detail/order-detail?id=' + this.orderId
				})
			},

			// 获取平台消息列表
			async get_push_msg_list() {
				// console.log(this.pushMsgList.length,'=============');
				if (!this.hasFlag) return // 说明已经没有更多啦
					++this.requestObj.pageNum
				let res = await this.$fetch(this.$api.get_push_msg_list, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				//console.log('平台消息列表',res)
				if (res.total > 0) {
					res.rows.forEach(item => {
						item.content = JSON.parse(item.content)
					})
				}
				//this.pushMsgList = res.rows

				// 拼接
				this.pushMsgList = [...this.pushMsgList, ...res.rows]
				this.hasFlag = this.pushMsgList.length < res.total
				// console.log('平台消息列表',this.pushMsgList)
			},

		},
		onLoad() {
			this.userType = uni.getStorageSync("userInfo").userType
			this.get_push_msg_list()

		},
		onShow() {
			this.$store.commit('isNewPlatMsgChange', false)
		},
		onReachBottom() {
			this.get_push_msg_list()
		}
	}
</script>

<style lang="less" scoped> 
	.container {
		// border: 1px solid #000000;
		overflow: hidden;

		.message-list {
			&>view {
				.gonggao {
					margin: 30rpx;
					padding: 30rpx;
					border-radius: 7px;
					background-color: #FFFFFF;

					view {
						display: flex;
					}

					&>view:first-child {
						margin-bottom: 30rpx;
						justify-content: space-between;

						&>text:first-child {
							font-weight: bold;
						}

						&>text:last-child {
							font-size: 12px;
							color: rgba(64, 33, 16, 0.50);
						}
					}
				}

				&>.guzhu {
					&>.boss-message {
						&>view:nth-child(3) {
							margin-top: 20rpx;
						}

						&>view:nth-child(4) {
							margin-top: 20rpx;

							&>text:first-child {
								margin-right: 30rpx;
								color: rgba(64, 33, 16, 0.50) !important;
							}
						}
					}
				}

				&>.guyuan {
					&>view {
						margin: 30rpx;
						padding: 30rpx;
						border-radius: 7px;
						background-color: #FFFFFF;

						&>view {
							display: flex;
						}

						&>view:first-child {
							margin-bottom: 30rpx;
							justify-content: space-between;

							&>text:first-child {
								font-weight: bold;
							}

							&>text:last-child {
								font-size: 12px;
								color: rgba(64, 33, 16, 0.50);
							}
						}

						&>view:nth-child(2),
						&>view:nth-child(3) {
							&>text:first-child {
								white-space: nowrap;
								margin-right: 30rpx;
								color: rgba(64, 33, 16, 0.50);
							}
						}

						&>view:nth-child(2) {
							margin-bottom: 20rpx;
						}
					}
				}

			}
		}
	}
</style>
